<template>
	<view class="container">
		<form @submit="submitForm" class="form">
			<!-- 个人信息 -->
			<view class="infoBox">
				<!-- 姓名 -->
				<view class="formItem1">
					<text>{{ app.language.name }}:</text>
					<view class="formB">
						{{form.name}}
					</view>
				</view>
				<!-- 公民身份证号 -->
				<view class="formItem1">
					<text>{{ app.language.card }}:</text>
					<view class="formB">
						{{form.card}}
					</view>
				</view>
				<!-- 联系电话 -->
				<view class="formItem1">
					<text>{{ app.language.phone }}:</text>
					<view class="formB">
						{{form.phone}}
					</view>
				</view>
				<!-- 同行人员数量 -->
				<view class="formItem1">
					<text>{{ app.language.ldy_otherNum }}:</text>
					<view class="formB">
						<input type="number" v-model="form.peerNumb" :placeholder="app.language.ldy_IotherNum" />
					</view>
				</view>
			</view>
			<!-- 入住旅客信息 -->
			<view class="infoBox1">
				<h2 class="title">{{app.language.ldy_passengerInfo}}</h2>
				<view class="form" v-for="(item, index) in formData" :key="index">
					<image src="../../static/del.png" mode="" class="del" v-if="index>0" @click="handleDel(index)">
					</image>
					<!-- 入住旅客姓名 -->
					<view class="formItem1" v-if="!formData[index].passengerName">
						<image class="zm" src="/static/zhengmian.png" @click="handlezm(index)"></image>
					</view>
					<view class="formItem1" v-if="formData[index].passengerName">
						<text><text class="bt">*</text>{{ app.language.ldy_passengerName }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].passengerName"
								:placeholder="app.language.ldy_IpassengerName" />
						</view>
					</view>
					<!-- 身份证号码 -->
					<view class="formItem1" v-if="formData[index].idcard">
						<text><text class="bt">*</text>{{ app.language.ldy_card }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].idcard" :placeholder="app.language.ldy_Icard" />
						</view>
					</view>
					<!-- 联系电话 -->
					<view class="formItem1">
						<text><text class="bt">*</text>{{ app.language.phone }}:</text>
						<view class="formB">
							<input type="text" v-model="formData[index].contactInformation"
								:placeholder="app.language.Iphone" />
						</view>
					</view>

					<!-- 户籍所在地 -->
					<view class="formItem1">
						<!-- <text><text class="bt">*</text>{{ app.language.ldy_minorDomicile }}:</text>
						<view class="formB">
							<picker mode="selector" name="domicile" :range="list" @change="onChange(index,$event)">
								<view class="picker">
									{{formData[index].value}}
								</view>
							</picker>
						</view> -->
						<text><text class="bt">*</text>{{ app.language.ldy_minorDomicile }}:</text>
						<!-- 三级联动组件 -->
						<area-picker v-if="formData[index].areaData.provinces.length > 0"
							:area-data="formData[index].areaData" @change="handleFirstAreaChange(index, $event)" />
					</view>
				</view>
				<!-- 新增 -->
				<view class="txry" @click="handleAdd">
					<view class="jia">
						<image src="../../static/jiahao.png" mode="" class="icon"></image>
						<text>{{ app.language.addText }}</text>
					</view>
				</view>
			</view>
			<button @click="submitForm" class="submit">{{ app.language.tijiao }}</button>
		</form>
	</view>
</template>

<script>
	import graceChecker from "../../components/graceChecker.js"
	import {
		getJgSq
	} from '@/api/api.js'
	import {
		GetHotelNoCard,
		GetHotelInfo
	} from '@/api/form.js'
	import {
		fetchAndProcessAreaData
	} from '@/api/processCountryData.js';
	import AreaPicker from '@/components/areapicker.vue';
	const global = getApp().globalData;
	export default {
		components: {
			AreaPicker
		},
		data() {
			return {
				app: {
					global: global,
					name: global.appName,
					language: global.language
				},
				form: {
					name: "",
					card: "",
					phone: "",
				},
				formData: [{
					passengerName: "",
					idcard: "",
					value: "",
					areaData: {
						provinces: [],
						cities: {},
						areas: {}
					}
				}],
				// 户籍所在地
				list: [],
				hjList: [],
				hjId: "",
				selectedValue: '',
				token: "",
				userInfo: {},
				hffuuid: "",
				policeStation: "",
			}
		},
		async onLoad(options) {
			this.hffuuid = options.hffuuid
			this.selectedValue = this.app.language.qxz
			this.formData[0].value = this.app.language.qxz
			this.formData[0].areaData = await fetchAndProcessAreaData();
			this.getToken()
		},
		methods: {
			// 获取缓存
			getToken() {
				let that = this
				uni.getStorage({
					key: 'loginData',
					success: function(res) {
						that.token = res.data.userInfo.appToken
						that.userInfo = res.data.userInfo
						that.form.phone = res.data.userInfo.phonenumber
						that.form.card = res.data.userInfo.idcard,
							that.form.name = res.data.userInfo.userName
						// 获取数据信息
						uni.showLoading({
							title: that.app.language.jzz,
						});
						let data = {
							appToken: res.data.userInfo.appToken,
						}
						// 获取旅店业基本信息
						GetHotelInfo(data).then((res) => {
							if (res.code == 200) {
								uni.hideLoading();
								if (res.data.hotelBaseList && res.data.hotelBaseList.length > 0) {
									that.policeStation = res.data.hotelBaseList[0].policeStation
								}
							}
						})
					}
				});
			},

			// 获取户籍列表
			// getList() {
			// 	getJgSq().then((res) => {
			// 		this.hjList = res.data
			// 		for (let i = 0; i < res.data.length; i++) {
			// 			this.list.push(res.data[i].domicileName);
			// 		}
			// 	})
			// },
			// // 选择户籍所在地
			// onChange(index, e) {
			// 	// value
			// 	this.formData[index].value = this.list[e.detail.value];
			// 	this.formData[index].registeredResidence = this.hjList[e.detail.value].domicileId;
			// },
			async loadAreaData() {
				uni.showLoading({
					title: this.app.language.jzz
				});

				try {
					const data = await fetchAndProcessAreaData();
					if (data) {
						for (let i = 0; i < this.formData.length; i++) {
							this.formData[i].areaData = data;
						}
					}
					// else {
					// 	uni.showToast({
					// 		title: '加载地区数据失败',
					// 		icon: 'none'
					// 	});
					// }
				} catch (error) {
					console.error('加载地区数据出错:', error);
					// uni.showToast({
					// 	title: '加载地区数据出错',
					// 	icon: 'none'
					// });
				} finally {
					uni.hideLoading();
				}
			},
			// 三级联动-未成年
			handleFirstAreaChange(index, selected) {
				// this.firstSelectedArea = selected;
				console.log('第一个选择器选择:', selected);
				this.formData[index].value = selected.fullText
				this.formData[index].registeredResidence = selected.fullText
				console.log('this.formData', this.formData)
			},

			//  form表单+1
			handleAdd() {
				let prem = {
					passengerName: "",
					idcard: "",
					value: this.app.language.qxz,
					areaData: {
						provinces: [],
						cities: {},
						areas: {}
					}
				}
				this.formData.push(prem); // 添加一个新的空表单项
				this.loadAreaData()
			},

			// form表单-1
			handleDel(index) {
				let that = this
				// uni.showModal({
				// 	// title: '提示',
				// 	content: '确定要删除吗?',
				// 	success: function(res) {
				// 		if (res.confirm) {

				// 			// 用户点击了确定按钮的相关逻辑可以放在这里
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 			// 用户点击了取消按钮的相关逻辑可以放在这里
				// 		}
				// 	}
				// });
				that.formData.splice(index, 1); // 移除指定索引的表单项
			},
			
			// 识别身份证号和姓名
			handlezm(index){
				uni.navigateTo({
					url: '../user/idcard',
					events: {
					      // 接收数据的回调
					      idCardData: (data) => {
					        this.handleIdCardData(data,index);
					      }
					    },
					    success: (res) => {
							console.log('res.eventChannel',res.eventChannel)
					      // 保存事件通道
					      this.eventChannel = res.eventChannel;
					    }
				});
			},
			
			handleIdCardData(data,index) {
			  console.log('收到身份证数据:', data);
			  console.log('收到身份证数据1212:', index);
			  // 填充表单数据
			  this.formData[index].passengerName = data.idcard_res.name.text
			  this.formData[index].idcard = data.idcard_res.id.text
			  uni.showToast({
			    title: this.app.language.cg,
			    icon: 'success'
			  });
			},

			submitForm() {
				for (let i = 0; i < this.formData.length; i++) {
					// 随行数量
					if (!this.form.peerNumb) {
						uni.showToast({
							title: this.app.language.ldy_IotherNum,
							icon: 'none',
						});
						return
					}
					// 入住旅客姓名
					if (!this.formData[i].passengerName) {
						uni.showToast({
							title: this.app.language.ldy_IpassengerName,
							icon: 'none',
						});
						return
					}
					// 身份证号
					if (!this.formData[i].idcard) {
						uni.showToast({
							title: this.app.language.ldy_Icard,
							icon: 'none',
						});
						return
					}
					// 联系电话
					if (!this.formData[i].contactInformation) {
						uni.showToast({
							title: this.app.language.Iphone,
							icon: 'none',
						});
						return
					}
					// 户籍所在地
					if (!this.formData[i].value || this.formData[i].value === this.app.language.qxz) {
						uni.showToast({
							title: this.app.language.ldy_IminorDomicile,
							icon: 'none',
						});
						return
					}
					this.formData[i].appToken = this.token;
					this.formData[i].hffuuid = this.hffuuid;
					this.formData[i].peerNumb = this.form.peerNumb;
					this.formData[i].policeStation = this.policeStation;
				}
				const submitData = this.formData.map(item => {
					const {
						areaData,
						...rest
					} = item; // 解构排除 areaData
					return rest; // 返回不包含 areaData 的新对象
				});

				uni.showLoading({
					title: this.app.language.jzz,
				});
				let data1 = [submitData]
				let data = {
					minorList: data1[0],
				}
				GetHotelNoCard(data1[0]).then((res) => {
					if (res.code == 200) {
						uni.hideLoading();
						uni.showToast({
							title: this.app.language.qddsh,
							icon: 'success',
						});
						setTimeout(() => {
							console.log('跳转首页')
							uni.reLaunch({
								url: '/pages/hotel/listText'
							});
						}, 1000);
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.form {
		width: 100%;
		padding-bottom: 20rpx;
		position: relative;
	}

	.formItem {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd
	}

	.infoBox {
		border: 1px solid #ddd;
		box-shadow: 1px 1px 10rpx #ddd;
		margin-bottom: 15rpx;
		padding: 15rpx;
	}

	.infoBox1 {
		box-shadow: 1px 1px 10rpx #ddd;
		padding: 10rpx;
	}

	.infoBox1 .form {
		border: 1px solid #ddd;
		margin-top: 25rpx;
	}

	.formItem1 {
		margin: 10rpx 0;
		padding: 10rpx;
		/* height: 162rpx; */
		position: relative;
		border-bottom: 1px dashed #ddd;
	}

	.formB {
		/* background-color: #f3f3f3; */
		font-size: 24rpx;
		padding: 10rpx;
		margin-top: 10rpx;
		position: absolute;
		right: 10rpx;
		top: -2rpx;
		color: #808080;
		text-align: right;
	}

	.formItem text,
	.formItem1 text {
		font-size: 26rpx;
	}

	.hjbImg button {
		font-size: 22rpx;
		width: 149rpx;
		height: 56rpx;
		background: #2f8ef9;
		color: #fff;
	}

	.hjbImg {
		/* position: absolute;
		bottom: 10rpx; */
		width: 150rpx;
		margin-top: 20rpx;
	}

	.scimage {
		width: 142rpx;
		height: 80rpx;
		position: absolute;
		bottom: 4rpx;
		left: 200rpx;
	}

	.title {
		margin-top: 30rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.submit {
		background-color: #2f8ef9;
		color: #fff;
		font-size: 28rpx;
		width: 95%;
		margin: 20rpx auto 0;
	}

	.bt {
		color: red;
		margin-right: 5rpx;
	}

	.jia {
		border: 1px dashed #2f8ef9;
		text-align: center;
		color: #2f8ef9;
		margin: 20rpx auto 0;
		font-size: 26rpx;
		border-radius: 10rpx;
		padding: 0 0 13rpx;
	}

	.jia image {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 8rpx;
	}

	.del {
		width: 25px;
		height: 25px;
		position: absolute;
		right: -5px;
		top: -8px;
		z-index: 9999;
	}

	.polSta {
		font-size: 26rpx;
		font-weight: 500;
		/* text-align: right; */
		color: #2f8ef9;
		margin-top: 15rpx;
	}

	.picker {
		width: 242rpx;
		color: #808080;
		padding: 10px;
		margin-top: -25rpx;
	}
	
	.zm{
		width: 100%;
		height: 375rpx;
	}
</style>